<template>
  <div>
    <NavBar>分类页面</NavBar>
    <div id="mainBox">
      <div class="category-header">
        <van-tabs v-model="active" @click="tabClick">
          <van-tab title="销量排序" name="0">销量排序</van-tab>
          <van-tab title="价格排序" name="1">价格排序</van-tab>
          <van-tab title="评化排序" name="2">评化排序</van-tab>
        </van-tabs>
      </div>
      <div style="margin-top: 10px">
        <van-sidebar v-model="activeKey">
          <van-collapse accordion v-model="activeName">
            <van-collapse-item :title="item.name" :name="item.name" :key="item.id" v-for="item in categories">
              <van-sidebar-item :title="item2.name" v-for="item2 in item.children" :key="item2.id"
                @click="getGoods(item2.id)" />
            </van-collapse-item>
          </van-collapse>
        </van-sidebar>
      </div>
      <div class="bs">
        <div class="content">
          <van-card @click="itemClick(item.id)" :title="item.title" :tag="item.comments_count >= 0 ? '流行' : '标签'"
            :price="item.price" :desc="item.updated_at" :num="item.comments_count" v-for="item in showGoods"
            :key="item.id" :thumb="item.cover_url" :lazy-load="true">
          </van-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/common/navbar";
import { ref, reactive, onMounted, getCurrentInstance, computed, watchEffect, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import BScroll from 'better-scroll'
export default {
  name: "index",
  components: { NavBar },
  setup() {
    const goods = reactive({
      sales: { page: 1, list: [] },
      price: { page: 1, list: [] },
      comments: { page: 1, list: [] }
    })
    let bscroll = reactive({})
    const { proxy } = getCurrentInstance()
    const router = useRouter()
    let active = ref(0)
    let currentCid = ref(0)
    const orders = ['sales', 'price', 'comments']
    let currentOrder = ref('sales')
    const activeKey = ref(0)
    let categories = ref([])
    const activeName = ref(0)
    onMounted(async () => {
      const res = await proxy.$API.category.getCategory()
      categories.value = res.categories
      bscroll = new BScroll(document.querySelector('.bs'), {
        probeType: 3,
        click: true,
        pullUpLoad: true
      })
      bscroll.on('pullingUp', async () => {
        const page = goods[currentOrder.value].page + 1
        await proxy.$API.category.getCategoryGoods(currentOrder.value, currentCid.value).then(res => {
          goods[currentOrder.value].list.push(...res.goods.data)
          goods[currentOrder.value].page += 1
        })
        bscroll.finishPullUp()
        bscroll.refresh()
      })
      await init()
    })
    const itemClick = id => {
      router.push({ path: '/detail', query: { id } })
    }
    const init = async () => {
      await proxy.$API.category.getCategoryGoods(currentOrder.value, currentCid.value).then(res => {
        goods[currentOrder.value].list = res.goods.data
        nextTick(() => {
          bscroll && bscroll.refresh()
        })
      })
    }
    const showGoods = computed(() => {
      return goods[currentOrder.value].list
    })
    const tabClick = (index) => {
      currentOrder.value = orders[index]
      init()
    }
    const getGoods = (id) => {
      currentCid.value = id
      init()
    }
    watchEffect(() => {
      nextTick(() => {
        //重新计算高度
        bscroll && bscroll.refresh()
      })
    })
    return {
      activeKey,
      categories,
      activeName,
      active,
      tabClick,
      orders,
      currentOrder,
      getGoods,
      goods,
      init,
      currentCid,
      showGoods,
      itemClick
    }
  }
}
</script>

<style scoped>
::v-deep .van-card {
  margin-top: 0;
}

#mainBox {
  margin-top: 45px;
}

.van-sidebar {
  width: 100px;
}

::v-deep .van-tabs__content {
  display: none;
}

::v-deep .van-collapse-item__content {
  padding: 12px 0;
}

.category-header {
  text-align: center;
}

::v-deep .van-cell {
  padding-left: 7px;
}

::v-deep .van-tab {
  margin-right: 10px;
  text-align: center;
}

::v-deep .van-cell__title span {
  width: 60px;
  display: inline-block;
}

.bs {
  position: absolute;
  top: 100px;
  left: 110px;
  right: 0;
  bottom: 0;
}</style>
